<template>
  <div class="trading-info">
    <div class="container">
      <div class="trading-info-title text-overflow">无卡交易信息</div>
      <!-- 查询方式 -->
      <el-row :gutter="10" style="padding:20px 10px;border-bottom:1px solid #efefef;">
        <el-col span="4">
          <!-- 日期查询 -->
            <el-date-picker
              class="filter-select"
              v-model="filters.startTime"
              align="right"
              type="date"
              size="small"
              placeholder="选择开始日期"
              format="yyyy 年 MM 月 dd 日"
              value-format="yyyy-MM-dd"
              :picker-options="pickerOptions"
            ></el-date-picker>
        </el-col>
        <el-col span="4">
            <el-date-picker
            class="filter-select"
            v-model="filters.endTime"
            align="right"
            type="date"
            size="small"
            placeholder="选择结束日期"
            format="yyyy 年 MM 月 dd 日"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-col>
        <el-col span="4">
             <!-- 流水号查询 -->

          <el-input
            prefix-icon="el-icon-search"
            class="filter-input"
            clearable
            v-model="filters.requestNo"
            placeholder="流水号查询"
          ></el-input>

        </el-col>
        <el-col span="4">
          <!-- 状态查询 -->
             <el-select class="filter-select" v-model="filters.payStatus" clearable placeholder="状态">
            <el-option
              v-for="item in statusList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col span="4">
             <!-- 类型查询 -->
          <el-select class="filter-select" v-model="filters.payType" clearable placeholder="类型">
            <el-option
              v-for="item in typeList"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </el-col>
        <el-col style="text-align:center" span="4">
            <el-button style="width:120px" @click="queryByFilters(false)">查询</el-button>
        </el-col>
      </el-row>
      <!-- 列表 -->
      <div class="trading-info-list" v-loading="loading" style="width: 100%">
        <div class="trading-list">
          <el-table :data="trading_list" style="width: 100%">
            <el-table-column type="index" width="50"></el-table-column>
            <el-table-column
              v-for="cell in trading_list_header"
              :key="cell.prop"
              :prop="cell.prop"
              :label="cell.label"
              :formatter="formatterList"
            ></el-table-column>
            <el-table-column type="operation" width="80">
              <template slot-scope="scope">
                <el-button
                  @click="handleWithdraw(scope.row)"
                  :disabled="scope.row.payStatus =='1'"
                >{{scope.row.payStatus =='1'?'已成功':'手动提现'}}</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <!-- 汇总统计 -->
        <div class="trading-count">
          <div
            style="padding-right:100px"
          >充值{{trading_count.recharge_count}}笔 总计{{trading_count.recharge_sum}}元</div>
          <div>提现{{trading_count.withdraw_count}}笔 总计{{trading_count.withdraw_sum}}元</div>
        </div>
        <div class="pages-control">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pages.currentPage"
            :page-size="pages.page_size"
            layout="prev, pager, next, jumper"
            :total="pages.total"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import USB from "@/utils/USB.js"; // 获取url
function formatterType(value) {
  if (value == "1") {
    return "在线收款";
  } else if (value == "2") {
    return "代还/提现";
  } else {
    return value;
  }
}
function formatterAmount(value) {
  return `￥${value || 0}`;
}
function formatterRate(value) {
  return (value * 100).toFixed(2) + "%";
}
function formatterStatus(value) {
  if (value == "0") {
    return "创建中";
  } else if (value == "1") {
    return "成功";
  } else if (value == "2") {
    return "失败";
  } else if (value == "3") {
    return "异常";
  } else {
    return value;
  }
}

export default {
  name: "trading-info",
  data() {
    return {
      loading: false,
      trading_count: {
        recharge_count: 0,
        recharge_sum: 0,
        withdraw_count: 0,
        withdraw_sum: 0
      },
      trading_list: [],
      trading_list_header: [
        { prop: "requestNo", label: "订单流水号" },
        { prop: "merchantNo", label: "商户订单号" },
        { prop: "amount", label: "实际金额" },
        { prop: "inAmount", label: "输入金额" },
        { prop: "channelDesc", label: "通道" },
        { prop: "phone", label: "手机号" },
        { prop: "payType", label: "类型" },
        { prop: "createTime", label: "交易时间" },
        { prop: "payStatus", label: "状态" }
      ],
      filters: {
        // 需要查询数据库
        payType: null,
        payStatus: null,
        endTime: null,
        startTime: null,
        requestNo: null
      },
      queryList: {
        // 在已有的基础上查找
        fuzzy: "",
        shopNo: "",
        cardNo: ""
      },
      statusList: [
        { value: "0", label: "创建中" },
        { value: "1", label: "成功" },
        { value: "2", label: "失败" },
        { value: "3", label: "异常" }
      ],
      typeList: [
        { value: "1", label: "在线收款" },
        { value: "2", label: "代还/提现" }
      ],
      pages: {
        total: 10,
        page_size: 20,
        currentPage: 1
      },
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            }
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            }
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            }
          }
        ]
      }
    };
  },
  components: {},
  created() {
    this.init();
    this.queryByFilters(false);
  },
  mounted() {},
  methods: {
    queryByFilters(hasPage) {
      this.loading = true;
      let params = hasPage
        ? `size=${this.pages.page_size}&page=${this.pages.currentPage - 1}`
        : `size=${this.pages.page_size}`;
        for(let key in this.filters){
          if(this.filters[key]!==null && this.filters[key] !== ""){
            params += `&${key}=${this.filters[key]}`;
          }
        }
      this.$Http
        .post("paymentchannel/FreeQuickWithdrawTemp/cardlessTransactionPage", params)
        .then(res => {
          this.loading = false;
          if (res.data.resp_code === "000000") {
            this.trading_list = res.data.result.content;
            this.pages.total = res.data.result.totalElements;
          } else {
            this.$notify.info({
              title: "消息",
              message: res.data.resp_message
            });
          }
        })
        .catch(err => {
          this.loading = false;
          this.$notify.error({
            title: "错误",
            message: "获取信息失败！"
          });
        });
    },
    handleWithdraw(row) {
      const token = sessionStorage.getItem(1);
      const url = `paymentchannel/freeQuickPay/queryWithDraw/${token}`;
      const params = `merchantNo=${row.merchantNo}&requestNo=${row.requestNo}`;
      this.$Http
        .post(url, params)
        .then(res => {
          if (res.data.resp_code === "000000") {
            this.$message.success(
              `提现成功！提现金额为：${res.data.result.amount},手续费为：${
                res.data.result.withdrawDepositFee
              }`
            );
          } else {
            this.$message.warning(res.data.resp_message);
          }
        })
        .catch(err => {
          this.$message.error(`手动发起提现失败！请重新尝试！`);
        });
      console.log(row);
    },
    queryByList(type) {
      //
      console.log(type);
    },
    handleCurrentChange(value) {
      this.loading = true;
      this.pages.currentPage = value;
      this.queryByFilters(true);
    },
    init() {
      let params = `size=${this.pages.page_size}&page=${this.pages.currentPage -
        1}`;
      // this.$Http.post(USB.U92,params).then(res=>{
      //  if(res.data.resp_code === "000000"){

      //  }
      // }).catch(err=>{
      //     this.$notify.error({
      //       title: '错误',
      //       message: '获取注册人数信息失败！'
      //     });
      // });
    },
    formatterList(row, column, cellValue, index) {
      //  格式化信息
      if (column.label === "类型") {
        return formatterType(cellValue);
      } else if (column.label === "状态") {
        return formatterStatus(cellValue);
      } else if (
        column.label === "输入金额" ||
        column.label === "实际金额"
      ) {
        return formatterAmount(cellValue);
      } else if (column.label === "刷卡费率") {
        return formatterRate(cellValue);
      } else {
        return cellValue===null?'--':cellValue;
      }
    }
  }
};
</script>
<style scoped>
.trading-info {
  box-sizing: border-box;
  padding: 20px;
}
.container {
  border: 1px solid #ededed;
}
.trading-info-title {
  height: 50px;
  line-height: 50px;
  font-size: 26px;
  color: #409eff;
  padding: 5px 20px;
  border-bottom: 1px solid #ededed;
}
.filter-input,
.filter-select {
  width: 160px;
  margin-right: 10px;
}
.filter-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px;
  flex-wrap: nowrap;
  overflow: hidden;
}

.member-count {
  height: 30px;
  text-align: left;
  line-height: 30px;
  border-bottom: 1px solid #ededed;
  border-top: 1px solid #ededed;
  padding: 5px 20px;
}

.trading-list {
  min-height: 300px;
  position: relative;
  padding: 0 10px;
}
.pages-control {
  border-top: 1px solid #ededed;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.filter-by-date {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
}
.el-input__icon {
  cursor: pointer;
}
.trading-count {
  color: #666;
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 0;
}
</style>
